<template>
  <div class="model-container">
    <div class="model-container mask" v-if="showMask"></div>
    <div :class="['model-content', type]" v-if="isShow">
      <header>
        {{ title }}
        <span class="icon" @click="hideModel">x</span>
      </header>
      <main>
        {{ content }}
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyModel',
  props: {
    showMask: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'this is model title'
    },
    content: {
      type: String,
      default: 'this is model content'
    },
    type: {
      type: String,
      default: 'warn',
      validator(value) {
        return ['primary', 'warn', 'danger'].includes(value);
      }
    }
  },
  methods: {
    hideModel () {
      this.$message.hide();
    }
  },
};
</script>

<style lang="scss" scoped>

.model-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .model-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 250px;
    background-color: #fff;
    header {
      position: relative;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      .icon {
        cursor: pointer;
        position: absolute;
        right: 10px;
      }
    }
    main {
      padding: 10px;
    }
    &.primary {
      header {
        color: #333;
        background-color: skyblue;
      }
    }
    &.warn {
      header {
        color: #333;
        background-color: orange;
      }
    }
    &.danger {
      header {
        color: #333;
        background-color: darkred;
      }
    }
  }
}
</style>
